盒模型（Box Model）是 CSS 排版的基礎，所有 HTML 元素都可以被視為一個個的「盒子」。理解盒模型，你就能掌握網頁元素的空間關係和排版。

一個盒子的組成由內而外分別是：

• Content (內容)： 盒子內部的實際內容，例如文字、圖片等。
• Padding (內邊距)： 內容與邊框之間的空間。它會增加盒子的可點擊區域或視覺空間。
• Border (邊框)： 盒子邊緣的線條。
• Margin (外邊距)： 盒子與其他盒子之間的空間。它用來控制元素間的距離。

可以分別用 padding、border、margin 屬性來設定它們。例如：
padding: 10px;（四個方向都是 10px）
border: 1px solid black;（1px 的黑色實線邊框）
margin: 20px;（四個方向都是 20px）

為個人簡介頁面的圖片加上邊框，並調整段落的內外邊距。
在 style.css 中加入：

CSS
img {
  border: 3px solid #34495e;
  padding: 5px;
  border-radius: 50%; /* 讓圖片變成圓形 */
  display: block; /* 讓圖片變成區塊元素 */
  margin: 0 auto; /* 圖片置中 */
}
p {
  margin: 20px 0; /* 上下 20px，左右 0 */
  padding: 10px;
}

透過盒模型，讓圖片看起來更突出，段落間的距離也更分明。明天要介紹兩個重要的容器標籤：<div> 和 <span>，它們是劃分區塊的好幫手。

執行成果 :